Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Limit Date Picker Dates
We can limit the date picker dates that we can select in the calendar.
To do this, we add the options prop with an array of dates:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date :options="options" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined,
options: [
"2020/12/01",
"2020/12/05",
"2020/12/06",
"2020/12/09",
"2020/12/23"
]
}
});
</script>
</body>
</html>
We can also limit the dates we can select with a method:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date :options="optionsFn" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
},
methods: {
optionsFn(date) {
return date >= "2020/12/03" && date <= "2020/12/15";
}
}
});
</script>
</body>
</html>
We can compare the date parameter directly with a date string and return the condition for the date that we want to select.
We can also split the date string and check against that in the condition:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-date :options="optionsFn" v-model="date"> </q-date>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: undefined
},
methods: {
optionsFn(date) {
const [year, month, day] = date.split("/");
return day % 2 === 0;
}
}
});
</script>
</body>
</html>
When the function returns true , the date can be selected.
Display the Content of Events
We can display the content of events with the q-splitter component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-splitter v-model="splitterModel" style="height: 450px;">
<template v-slot:before>
<div class="q-pa-md">
<q-date v-model="date" :events="events" event-color="orange" />
</div>
</template>
<template v-slot:after>
<q-tab-panels
v-model="date"
animated
transition-prev="jump-up"
transition-next="jump-up"
>
<q-tab-panel name="2020/12/01">
<div class="text-h4 q-mb-md">2020/12/01</div>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="2020/12/05">
<div class="text-h4 q-mb-md">2020/12/05</div>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
<q-tab-panel name="2020/12/06">
<div class="text-h4 q-mb-md">2020/12/06</div>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
<p>
Lorem ipsum dolor sit
</p>
</q-tab-panel>
</q-tab-panels>
</template>
</q-splitter>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
date: "2020/12/01",
splitterModel: 50,
events: ["2020/12/01", "2020/12/05", "2020/12/06"]
}
});
</script>
</body>
</html>
We use v-model to bind the selected date to the date model.
events has the event dates.
We put the date picker on the left side with the before slot.
The after slot has the content we display on the right side.
We use the q-tab-panels to display content according to the date value.
If the date matches the name prop’s value on q-tab-panel , then it’ll be displayed.
Conclusion
We can display events and limit date selections with Quasar’s date picker.
